<template>
  <div>
    <div style="align-items: center;display: flex;justify-content:center">
      <img src="@/assets/logo.png" width="28px" height="28px" style="padding-right: 15px;">
      <h1 style="font-weight:900">{{ msg }}</h1>
    </div>
    <van-grid clickable :column-num="4">
      <van-grid-item icon="home-o" :replace="true" text="电子秤称量" to="/dzclb">
        <template #icon>
          <img src="@/assets/dianzicehng.svg" width="28px" height="28px">
        </template>
      </van-grid-item>
      <van-grid-item icon="home-o" :replace="true" text="本地数据库" to="/dataBase">
        <template #icon>
          <img src="@/assets/dataBase.svg" width="28px" height="28px">
        </template>
      </van-grid-item>
      <van-grid-item icon="home-o" :replace="true" text="初始化数据库" to="/initDataBase">
        <template #icon>
          <img src="@/assets/database-confrim.svg" width="28px" height="28px">
        </template>
      </van-grid-item>
      <van-grid-item icon="qr" :replace="true" text="生成二维码" @click="qrClick">
        <template #icon>
          <img src="@/assets/qrcode.svg" width="28px" height="28px">
        </template>
      </van-grid-item>
      <van-grid-item icon="brush-o" text="打印测试" @click="printClick">
        <template #icon>
          <img src="@/assets/print.svg" width="28px" height="28px">
        </template>
      </van-grid-item>
      <van-grid-item text="退出" @click="logOutClick">
        <template #icon>
          <img src="@/assets/exit.svg" width="28px" height="28px">
        </template>
      </van-grid-item>
      <van-dialog v-model="qRShow" title="二维码">
        <QrCode qrContent="二维码弹窗测试" />
      </van-dialog>
      <van-grid-item icon="home-o" :replace="true" text="投/配料列表" to="/feeding">
        <template #icon>
          <img src="@/assets/dianzicehng.svg" width="28px" height="28px">
        </template>
      </van-grid-item>
      <van-grid-item icon="home-o" :replace="true" text="工单任务接收/查询列表" to="/orderList">
        <template #icon>
          <img src="@/assets/dianzicehng.svg" width="28px" height="28px">
        </template>
      </van-grid-item>
      <van-grid-item icon="home-o" :replace="true" text="完成工单查询列表" to="/CompleteOrder">
        <template #icon>
          <img src="@/assets/dianzicehng.svg" width="28px" height="28px">
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { ref, onMounted } from "vue"
import QrCode from '@/components/qrCode'
import { Toast, Dialog } from 'vant';
import router from '@/router'

export default {
  name: "Home",
  components: { QrCode },
  setup() {
    const msg = "欢迎使用企业家RAMC电子秤软件";
    const qRShow = ref(false);
    onMounted(function () {

    })
    const qrClick = () => {
      qRShow.value = true;
    }
    const printClick = () => {
      try {
        cordova.plugins.PluginScalesPrint.printMethod("GCD20230329001;CP001;01;253;001", 100, 10, 7, function (res) {
          Toast.success(res);
        }, function (error) {
          Dialog.alert({
            title: 'error:',
            message: JSON.stringify(error),
          })
        })
      } catch (error) {
        Dialog.alert({
          title: '异常信息:',
          message: JSON.stringify(error),
        })
      }
    }

    const logOutClick = () => {
      Dialog.confirm({
        title: '提示：',
        message: '确认退出系统？',
      }).then(() => {
        sessionStorage.removeItem("_sessionlogin")
        router.push('/login')
      }).catch(() => {
        // on cancel
      });
    }

    return {
      msg,
      qRShow,
      qrClick,
      printClick,
      logOutClick
    }
  }
}

// export default {
//   name: 'HelloWorld',
//   data() {
//     return {
//       msg: 'Welcome to Your Vue.js App'
//     }
//   }
// }

/*

exports.printMethod = function (arg0, x, y, size, success, error) {
    if (!x) {
        x = 100
    }
    if (!y) {
        y = 10
    }
    if (!size) {
        size = 7
    }
    exec(success, error, 'PluginScalesPrint', 'printMethod', [arg0, x, y, size]);
};

});
*/
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
